<template>
    <div class="home">
        <el-container>
            <!-- //侧边栏部分 -->
            <el-aside width="auto">
                <div class="logo"></div>
                <el-menu
                :unique-opened='true'
                :router="true"
                :collapse="isCollapse"
                class="el-menu-admin"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                    <el-submenu :index="item.path" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <el-menu-item :index="tag.path" v-for="tag in item.children" :key="tag.id">
                            <i class="el-icon-menu"></i><span>{{tag.authName}}</span>
                        </el-menu-item>
                    </el-submenu>
                    <!-- <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="roles">
                            <i class="el-icon-menu"></i><span>角色列表</span>
                        </el-menu-item>
                        <el-menu-item index="/rights">
                            <i class="el-icon-menu"></i><span>权限列表</span>
                        </el-menu-item>
                    </el-submenu> -->
                </el-menu>
            </el-aside>
            <el-container>
                <!-- //header部分 -->
                <el-header>
                    <div class="myicon myicon-menu toggle-btn" @click="toggleCollapse"></div> 
                    <div class="system-title">电商后台管理系统</div>
                    <div>
                        <span class="welcome">您好,{{$store.getters.username}}</span>  
                    <el-button type="text" @click="logout">退出</el-button>
                    </div>  
                </el-header>
                <!-- //内容部分 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
<script>
import {getUserList,getMenus} from "@/api"
    export default {
        data(){
            return{
                isCollapse:false,
                menuList:[]
            }
        },
        // mounted(){
        //     let params = {params:{query:'',pagenum:1,pagesize:5}}
        //     // console.log(params);
            
        //     getUserList(params).then(res=>{
        //         console.log(res);
                
        //     })
        // },
        created(){
            getMenus().then(res => {
                console.log(res);
                if(res.meta.status === 200){
                    this.menuList = res.data
                }
            })
        },
        methods: {
            handleOpen(key, keyPath) {
                
            },
            handleClose(key, keyPath) {
                
            },
            toggleCollapse(){
                this.isCollapse = !this.isCollapse
            },
            logout(){
                localStorage.removeItem("mytoken")
                this.$router.push({name:"Login"})
            }
        }
    }
</script>
<style lang="scss" scoped>
    .home {
        height: 100%;
        // background-color: #E5E5E5;
        .el-menu-admin:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
        .el-container {
            height: 100%;
        }
        .el-aside {
            background-color: #545c64;
        }
        .el-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #545c64;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }
        .logo {
            height:60px;
            background: url(../assets/logo.png);
            background-size: cover;
            background-color: #989898;
        }
        .toggle-btn {
            padding: 0 10px;
            margin-left: -20px;
            font-size: 36px;
            line-height: 60px;
            color: #989898;
            cursor: pointer;
            
        }
        .system-title {
            font-size: 28px;
            color: white;
        }
        .welcome {
            color: white;
        }
    }
</style>

